<template>
    <div class="app-container">
        <el-card class="box-card components-container">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="班级名称">
                    <el-input v-model="form.className" readonly></el-input>
                </el-form-item>
                <el-form-item label="所属专业">
                    <el-input v-model="form.specialityName" readonly></el-input>
                </el-form-item>
                <el-form-item label="所属年级">
                    <el-input v-model="form.gradeName" readonly></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="form.createTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="是否有效">
                    <template slot-scope="scope">
                        <el-switch v-model="form.validFlag" :active-value="1" :inactive-value="0" disabled></el-switch>
                    </template>
                </el-form-item>
                <el-form-item label="已授课程">
                </el-form-item>
                <el-card class="box-card components-container">
                    <el-table v-loading="loading" :data="courseList" @selection-change="handleSelectionChange">
                        <!-- <el-table-column type="selection" width="55" align="center" /> -->
                        <el-table-column label="主键" width="55" align="center" prop="id" />
                        <el-table-column label="课程名称" align="center" prop="name" />
                        <el-table-column label="课程图片" align="center" prop="resultImage" width="100">
                            <template slot-scope="scope">
                                <image-preview :src="scope.row.resultImage" :width="50" :height="50" />
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="课程排序" align="center" prop="sort" /> -->
                        <!-- <el-table-column label="所属专业id" align="center" prop="specialityId" /> -->
                        <el-table-column label="所属专业名称" align="center" prop="specialityName" />
                        <el-table-column label="创建人" align="center" prop="creatorName" />
                        <el-table-column label="课程状态" align="center" prop="validFlag">
                            <template slot-scope="scope">
                                <!-- 用active-value="1" inactive-value="0"时的active-value值类型为string，如果要求active-value值类型为number时，必须在其前面加上冒号(:)来转换 -->
                                <el-switch v-model="scope.row.validFlag" :active-value="1" :inactive-value="0"
                                    @change="handleValidFlagChange(scope.row)"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="课程简介" align="center" prop="remark">
                            <template slot-scope="scope">
                                <div v-if='scope.row.remark && (scope.row.remark.length > 10)'>
                                    <el-popover title="详细" trigger="hover" placement="top" width="200">
                                        <p>{{ scope.row.remark }}</p>
                                        <div slot="reference">
                                            <p size="medium">{{ scope.row.remark | remark }}</p>
                                        </div>
                                    </el-popover>
                                </div>
                                <div v-else>
                                    <span>{{ scope.row.remark }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" align="center" prop="createTime" />
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-delete" @click="removeCourse(scope.row)"
                                    v-hasPermi="['student:class:removecourse']">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>

                <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>返回</el-button>
                </el-form-item> -->
            </el-form>
        </el-card>

    </div>
</template>
  
<script>
import { listClass, getClass, delClass, addClass, updateClass, delReClassCourse } from "@/api/student/class";
import { listSpeciality } from "@/api/student/speciality";
import { listGrade } from "@/api/student/grade";
export default {
    name: "classDetail",
    data() {
        return {
            form: {
                className: '',
                specialityName: '',
                gradeName: '',
                creatorName: '',
                createTime: '',
                validFlag: ''
            },
            // 课程表格数据
            courseList: [],
            loading: true
        };
    },
    created() {
        this.getClassDetail();
    },
    watch: {
        '$route.params': {
            immediate: true,
            handler() {
                console.log(this.$route.name);
                if(this.$route.name=='classDetail'){
                    this.getClassDetail();
                }
            }
        }
    },
    methods: {
        // onSubmit() {
        //     console.log('submit!');
        // },
        getClassDetail() {
            var id = this.$route.query.id
            this.loading = true;
            getClass(id).then(response => {
                this.form = response.data;
                console.log(this.form);
                this.courseList = response.data.tcourseInfoVos;
                this.loading = false;
            });
        },
        handleSelectionChange() {

        },
        removeCourse(row) {
            console.log(row.id);
            var reClassCourseData = {
                courseIds: [row.id],
                classId: this.$route.query.id
            }
            this.$modal.confirm('是否确认移除编号为"' + row.id + '"的课程？').then(function () {
                return delReClassCourse(reClassCourseData);
            }).then(() => {
                this.getClassDetail();
                this.$modal.msgSuccess("移除成功");
            }).catch(() => { });
        }
    },
    filters: {
        remark(value) {
            if (!value) {
                return
            } else {
                if (value.length > 10) {
                    var target = value.substr(0, 10) + '....'
                } else {
                    target = value
                }
                return target;
            }
        },
    }
};
</script>
  